<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"-->
    <!--          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <link rel="stylesheet" th:href="@{/bootstrap.min.css}" />
    <script th:src="@{/vue.js}"></script>


</head>
<body>

<div th:insert="publicHeader"/>
<script th:src="@{/publicHeader.js}"></script>



<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">

    <div class="container" >




        <div class="row">
            <div class="col-sm-6 col-md-4" v-for="product in productList">
                <div class="thumbnail">
                    <img :src="product.productimgsrc" alt="..." class="col-sm-6 col-md-6">
                    <div class="caption text-left">
                        <p>商品名:<span v-text="product.productname">name</span></p>
                        <p>价格:<span v-text="product.productprice">price</span></p>
                        <p>
                            <a class="btn btn-success" @click="addCart(product.id)">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 col-md-offset-5 col-lg-offset-4col-xl-offset-5" >
                <ul class="pagination justify-content-center">

                    <li><a @click="goNum(currentPage-1)">上一页</a></li>
                    <li v-for="num in totalPage"><a @click="goNum(num)" v-text="num">n</a></li>
                    <li><a @click="goNum(currentPage+1)">下一页</a></li>

                </ul>
            </div>
        </div>

    </div>


</div>

<script>

    console.log(".........index...........")

    let index = new Vue({
        el: "#app"
        ,
        data: {
            currentPage:1,
            pageSize:3,
            totalPage:0,
            totalNum:0,
            productList:[],
            keyword:""
        }
        ,
        methods: {
            initProductList(){

                //组装请求参数
                let params = {
                    currentPage:this.currentPage,
                    pageSize:this.pageSize
                }

                //this 代表当前方法所在的对象
                console.log(this)  //这里的this代表vue对象

                let vueObj = this;

                //发起post请求   url         请求参数   对请求结果做处理的回调函数
                $.post("/product/pageData",params,function (data) {
                    //该函数在请求成功后调用, data为请求结果的数据

                    console.log(data);

                    console.log(this);  //这里的this代表 $.post
                    console.log(vueObj)

                    vueObj.productList = data.records;
                    vueObj.totalPage = data.pages;
                    vueObj.totalNum = data.total;

                })

            }
            ,
            goNum(pageNum){

                //对于无效pageNum值无需任何操作
                if (pageNum<1 || pageNum>this.totalPage || pageNum==this.currentPage){
                    console.log("无效pageNum值 "+pageNum);
                    return;
                }

                //更新currentPage并刷新数据
                this.currentPage = pageNum;
                // this.initProductList();
                if(this.keyword){
                    this.search();
                }else{
                    this.initProductList();
                }
            }
            ,
            search(){
                console.log(this.keyword)
                //js里空字符串等价于false,非空字符串等价于true
                if (this.keyword){
                    //alert(this.keyword);

                    //请求后台接口,搜索数据,然后更新页面数据

                    //组装请求参数
                    let params = {
                        currentPage:this.currentPage,
                        pageSize:this.pageSize,
                        keyword: this.keyword
                    }

                    let vueObj = this;

                    //发起post请求   url         请求参数   对请求结果做处理的回调函数
                    $.post("/product/search",params,function (data) {
                        //该函数在请求成功后调用, data为请求结果的数据

                        console.log(data);

                        console.log(this);  //这里的this代表 $.post
                        console.log(vueObj)

                        vueObj.productList = data.records;
                        vueObj.totalPage = data.pages;
                        vueObj.totalNum = data.total;

                    })

                }

            }
            ,
            addCart(productId){
                console.log(productId)
                //如果尚未登录,提示先登录
                if(!publicHeader.currentUserName){
                    alert("尚未登录,请登录后再加购商品")
                    location.href="/login.html"
                    return;
                }

                $.post("/cart/add",{productId:productId},function (data) {
                    console.log(data)
                    if (data=="ok"){
                        alert("加入购物车成功")
                    }else {
                        alert(data)
                    }
                })

            }
        }
        ,
        created(){

            this.initProductList();
        }

    });


</script>


<div th:insert="publicFooter"/>
<script th:src="@{/publicFooter.js}"></script>


</body>
</html>